<template>
	<view class="content">
		<view class="topbak" :style="{ height: sH +10+ 'px' }">

		</view>
		<navigator hover-class="none" class="nav-box" open-type="navigateBack">
			<u-icon name="arrow-left" l color="#000000" label-color="#000000" :size="20" :label-size="18"
				label="我的评价"></u-icon>
		</navigator>
		<view class="bag">
			<view class="bag_info flex-col justify-between items-start" v-for="i in info">
				<view class="left flex items-center">
					<view class="left_o">
						<image :src="i.user_image" mode="widthFix" style="width: 96rpx;"></image>
					</view>
					<view class="left_t">
						<view class="t_o flex">
							<view class="">
								{{i.user_name||'同路仁接单员'}}
							</view>
							<view class="t_time">
								{{i.createtime}}
							</view>
						</view>
						<view class="flex items-center" style="margin-top: 8rpx;">
							<u-rate activeColor='#FF6401' :count="count" readonly v-model="i.start"></u-rate>
						</view>
					</view>
				</view>
				<view class="bag_con">
					{{i.content}}
				</view>
				<view class="flex justify-between flex-wrap" v-for="img in i.images">
					<image :src="img" mode="widthFix" style="width: 196rpx;margin: 10rpx 0;"></image>
				</view>
			</view>
		</view>
		<image src="@/static/logo.png" mode="widthFix" style="position: absolute;bottom: 20rpx; width: 690rpx;">
		</image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: [],
				count: 5,
				value: 2.5,
				title: 'Hello',
				sH: 0,
				pagesize: 5,
				page: 1
			}
		},
		onReachBottom() {
			this.page++
			this.shop_evaluation_reply()
		},
		onLoad() {
			this.getWinTop().then(res => {
				this.sH = res.statusBar;
			});
			this.shop_evaluation_reply()
		},
		methods: {
			shop_evaluation_reply() {
				this.$api.shop_evaluation_reply({
					page: this.page,
					pagesize: this.pagesize,
				}).then(res => {
					this.info = this.info.concat(res.data)
				})
			}
		}
	}
</script>

<style lang="scss">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
    position: relative;
		.nav-box {
			width: 100%;
		}

		.bag {
			margin: 50rpx 32rpx 0 32rpx;
padding-bottom: 70rpx;
			.bag_info {
				margin: 20rpx 0;
				padding: 20rpx;
				width: 686rpx;
				height: auto;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
				border-radius: 24rpx 24rpx 24rpx 24rpx;

				.left {
					.left_o image {
						border-radius: 50rpx;
					}

					.left_t {
						margin-left: 10rpx;

						.t_o {
							font-weight: bold;
							font-size: 32rpx;
							color: #00091A;
							display: flex;
							align-items: baseline;

							.t_time {
								font-size: 24rpx;
								color: #CCCED1;
								margin-left: 10rpx;
							}
						}
					}
				}

				.bag_con {
					margin-top: 15rpx;
				}
			}
		}
	}
</style>